<template>
  <div class="allCategoryContainer">
    <!-- 头部 -->
    <!-- 商品排序 -->
    <div class="allSort">
      <a @click="changePrice('0', allGoodsList)">综合排序</a>
      <a @click="changePrice('1', allGoodsList)">价格从低到高</a>
      <a @click="changePrice('2', allGoodsList)">价格从高到低</a>
    </div>
    <!-- 商品内容 -->
    <div class="allCategoryContext">
      <!-- 商品项 -->
      <div
        class="categoryItem"
        v-for="(goods, index) in allGoodsList"
        :key="index"
      >
        <div class="itemImg">
          <img :src="goods.productImageBig" />
        </div>
        <div class="title">{{ goods.productName }}</div>
        <div class="desc">{{ goods.subTitle }}</div>
        <div class="detailAndCart">
          <p class="price"><span>¥</span>{{ goods.salePrice }}</p>
          <div class="btn">
            <input
              class="detail"
              type="button"
              value="查看详情"
              @click="toDetail(goods.productId)"
            />
            <input class="cart" type="button" value="加入购物车" />
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        :current-page="1"
        :page-sizes="[10, 20, 50]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="200"
      >
      </el-pagination>
    </div>
    <!-- 底部 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AllCategory',
  data() {
    return {}
  },

  computed: {
    ...mapGetters(['allGoodsList']),
  },
  mounted() {
    this.getAllGoods()
  },
  methods: {
    // 获取全部商品数据
    getAllGoods() {
      this.$store.dispatch('getAllGoodsData')
    },
    //跳转到商品详情页
    toDetail(goodsId) {
      // console.log(goodsId)
      this.$router.push({
        name: 'detail',
        params: { goodsId },
      })
    },
    changePrice(num, allGoodsList) {
      if (num === '0') {
        this.getAllGoods()
      } else if (num === '1') {
        allGoodsList.sort((a, b) => {
          return a.salePrice - b.salePrice
        })
      } else {
        allGoodsList.sort((a, b) => {
          return b.salePrice - a.salePrice
        })
      }
    },
  },
}
</script>

<style lang="less">
/* 全部商品 */
.allCategoryContainer {
  width: 1250px;
  // height: 60px;
  margin: 20px auto;
  /* background-color: cadetblue; */
}
/* 全部商品排序 */
.allCategoryContainer .allSort {
  width: 100%;
  height: 100%;
  line-height: 60px;
  margin-left: 10px;
}
.allCategoryContainer a {
  display: inline-block;
  font-size: 12px;
  padding-right: 20px;
  cursor: pointer;
  color: #999;
}
.allCategoryContainer a:hover {
  color: #5683ea;
}
// .allCategoryContainer input {
//   width: 80px;
//   height: 30px;
//   font-size: 12px;
//   color: #ccc;
//   text-align: center;
//   border: 1px solid #ccc;
//   border-radius: 5px;
//   outline: none;
//   background: #ededed;
// }
// .allSort .priceBtn {
//   width: 80px;
//   height: 30px;
//   color: #eee;
//   margin-left: 10px;
//   background-color: #678ee7;
// }
// .allSort .priceBtn:hover {
//   background-color: #5078df;
// }
/* 商品详情 */
.allCategoryContext {
  width: 1250px;
  /* height: 2150px; */
  // background-color: darkolivegreen;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.allCategoryContext .categoryItem {
  width: 305px;
  height: 430px;
  // background-color: peru;
  border: 1px solid #ccc;
  flex: 1;
}
.allCategoryContext .categoryItem .itemImg {
  width: 305px;
  height: 266px;
}
.allCategoryContext .categoryItem img {
  margin: 50px 49px 10px;
  width: 206px;
  height: 206px;
}
.allCategoryContext .categoryItem .title {
  font-size: 16px;
  color: #424242;
}
.allCategoryContext .categoryItem .desc {
  font-size: 12px;
  color: #d0d0d0;
  padding: 10px;
}
.allCategoryContext .categoryItem .detailAndCart {
  color: #d44d44;
  height: 30px;
  margin-top: 10px;
  position: relative;
}
.detailAndCart .price {
  height: 30px;
  font-size: 18px;
  font-weight: 700;
}
.detailAndCart .btn {
  display: none;
  height: 30px;
  font-size: 12px;
  position: absolute;
  left: 50px;
  top: 0;
}
.categoryItem:hover .detailAndCart .btn {
  display: block;
}
.categoryItem:hover .price {
  display: none;
}
.btn .detail {
  width: 100px;
  margin-right: 5px;
  color: #646464;
  border: 1px solid #e1e1e1;
  background-color: #fff;
}
.btn .detail:hover {
  background-color: #e1e1e1;
}
.btn .cart {
  width: 100px;
  color: #fff;
  border: #5c81e3;
  background-color: #678ee7;
}
.btn .cart:hover {
  background-color: #5078df;
}
// 分页器
.pagination {
  // height: 400px;
  padding: 50px 0;
  padding-right: 20px;
  float: right;
}
</style>
